{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <!-- Hero Section -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Medical Device Regulatory Knowledge Base</h1>
        <p class="text-gray-600">Professional regulatory information at your fingertips</p>
    </div>

    <!-- Quick Ask Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Ask</h2>
        <p class="text-gray-600 mb-4">Get instant answers from your regulatory knowledge base</p>
        <div class="relative">
            <input 
                type="text" 
                placeholder="Ask about regulations, guidances, or compliance requirements..."
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                id="quickAskInput"
            >
            <button 
                onclick="quickAsk()"
                class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white px-4 py-1.5 rounded-md hover:bg-indigo-700"
            >
                Ask
            </button>
        </div>
    </div>

    <!-- Action Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Start a Chat -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="location.href='/chat'">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-comments text-blue-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-900 mb-2">Start a Chat</h3>
            <p class="text-gray-600 text-sm">Ask questions and get cited answers from regulatory documents</p>
        </div>

        <!-- Browse Documents -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="location.href='/documents'">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-folder-open text-green-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-900 mb-2">Browse Documents</h3>
            <p class="text-gray-600 text-sm">Explore your document library with advanced filtering</p>
        </div>

        <!-- Upload Docs -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer" onclick="location.href='/upload'">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                <i class="fas fa-cloud-upload-alt text-purple-600 text-xl"></i>
            </div>
            <h3 class="font-semibold text-gray-900 mb-2">Upload Docs</h3>
            <p class="text-gray-600 text-sm">Add new documents to the knowledge base</p>
        </div>
    </div>

    <!-- Collections Grid -->
    <div class="mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Collections</h2>
        <div id="collectionsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Loading state -->
            <div class="col-span-full text-center py-8">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
                <p class="mt-2 text-gray-500">Loading collections...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', async () => {
    await loadCollectionStats();
});

async function loadCollectionStats() {
    try {
        const response = await fetch('/api/collections/stats');
        const data = await response.json();
        
        if (data.status === 'success') {
            renderCollections(data.collections);
        } else {
            showError('Failed to load collections');
        }
    } catch (error) {
        console.error('Error loading collections:', error);
        showError('Error loading collections');
    }
}

function renderCollections(collections) {
    const grid = document.getElementById('collectionsGrid');
    
    if (collections.length === 0) {
        grid.innerHTML = `
            <div class="col-span-full text-center py-8">
                <i class="fas fa-folder-open text-gray-300 text-4xl mb-3"></i>
                <p class="text-gray-500">No collections available</p>
            </div>
        `;
        return;
    }
    
    grid.innerHTML = '';
    
    const colorMap = {
        'blue': 'bg-blue-100 text-blue-600',
        'red': 'bg-red-100 text-red-600',
        'green': 'bg-green-100 text-green-600',
        'purple': 'bg-purple-100 text-purple-600',
        'yellow': 'bg-yellow-100 text-yellow-600',
        'pink': 'bg-pink-100 text-pink-600'
    };
    
    collections.forEach(collection => {
        const colorClass = colorMap[collection.color] || 'bg-gray-100 text-gray-600';
        
        const card = document.createElement('div');
        card.className = 'bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer';
        card.onclick = () => viewCollection(collection.name);
        
        card.innerHTML = `
            <div class="flex items-center justify-between mb-3">
                <div class="w-10 h-10 ${colorClass} rounded-lg flex items-center justify-center">
                    <span class="font-semibold text-sm">${collection.display_name.substring(0, 4)}</span>
                </div>
                <span class="text-sm text-gray-500">${collection.document_count} docs</span>
            </div>
            <h3 class="font-semibold text-gray-900 mb-2">${collection.display_name}</h3>
            <p class="text-gray-600 text-sm">${collection.description || 'No description available'}</p>
        `;
        
        grid.appendChild(card);
    });
}

function viewCollection(collectionName) {
    // Navigate to documents page with collection filter
    window.location.href = `/documents?collection=${encodeURIComponent(collectionName)}`;
}

function showError(message) {
    const grid = document.getElementById('collectionsGrid');
    grid.innerHTML = `
        <div class="col-span-full text-center py-8">
            <i class="fas fa-exclamation-triangle text-red-300 text-4xl mb-3"></i>
            <p class="text-red-500">${message}</p>
        </div>
    `;
}

function quickAsk() {
    const question = document.getElementById('quickAskInput').value.trim();
    if (question) {
        window.location.href = `/chat?question=${encodeURIComponent(question)}`;
    }
}

document.getElementById('quickAskInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        quickAsk();
    }
});
</script>
{% endblock %}